import { useState } from "react";
import styles from "./MarketingCalendar.module.css";

// 导入图片
import img1 from "./images/1.jpg";
import img2 from "./images/2.jpg";
import img3 from "./images/3.jpg";

// 数据类型定义
interface Festival {
  id: string;
  name: string;
  date: string;
  isHot: boolean;
  daysAfter: number;
  templates: Template[];
}

interface Template {
  type: string;
  count: number;
  imageUrl: string;
}

// 模拟数据
const festivals: Festival[] = [
  {
    id: "dragon-boat",
    name: "端午佳节",
    date: "2025-05-31",
    isHot: true,
    daysAfter: 8,
    templates: [
      {
        type: "端午节H5",
        count: 405,
        imageUrl: img1,
      },
      {
        type: "端午节视频模板",
        count: 56,
        imageUrl: img2,
      },
      {
        type: "端午节海报",
        count: 825,
        imageUrl: img3,
      },
      {
        type: "端午节插画",
        count: 94,
        imageUrl: img1,
      },
      {
        type: "端午节电商模板",
        count: 427,
        imageUrl: img2,
      },
    ],
  },
  {
    id: "children-day",
    name: "儿童节",
    date: "2025-06-01",
    isHot: true,
    daysAfter: 9,
    templates: [
      {
        type: "儿童人像实拍",
        count: 72,
        imageUrl: img3,
      },
      {
        type: "儿童节海报",
        count: 448,
        imageUrl: img1,
      },
      {
        type: "61儿童节H5",
        count: 240,
        imageUrl: img2,
      },
      {
        type: "儿童节插画",
        count: 65,
        imageUrl: img3,
      },
      {
        type: "儿童节欢快童真配乐",
        count: 40,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "summer-day",
    name: "你好夏天",
    date: "2025-06-02",
    isHot: false,
    daysAfter: 10,
    templates: [
      {
        type: "夏日氛围实拍",
        count: 63,
        imageUrl: img2,
      },
      {
        type: "夏日海报",
        count: 391,
        imageUrl: img3,
      },
      {
        type: "夏日H5",
        count: 330,
        imageUrl: img1,
      },
      {
        type: "夏日潮流插画",
        count: 215,
        imageUrl: img2,
      },
      {
        type: "夏日设计素材",
        count: 80,
        imageUrl: img3,
      },
    ],
  },
  {
    id: "grain-in-ear",
    name: "芒种",
    date: "2025-06-05",
    isHot: false,
    daysAfter: 13,
    templates: [
      {
        type: "芒种海报",
        count: 364,
        imageUrl: img1,
      },
      {
        type: "芒种H5",
        count: 265,
        imageUrl: img2,
      },
      {
        type: "芒种插画",
        count: 90,
        imageUrl: img3,
      },
      {
        type: "芒种视频模板",
        count: 28,
        imageUrl: img1,
      },
      {
        type: "芒种农业实拍",
        count: 39,
        imageUrl: img2,
      },
    ],
  },
  {
    id: "eye-care-day",
    name: "全国爱眼日",
    date: "2025-06-06",
    isHot: false,
    daysAfter: 14,
    templates: [
      {
        type: "爱眼日医疗插画",
        count: 40,
        imageUrl: img3,
      },
      {
        type: "爱眼日海报",
        count: 114,
        imageUrl: img1,
      },
      {
        type: "爱眼日保护视力H5",
        count: 68,
        imageUrl: img2,
      },
      {
        type: "眼科医疗行业实拍",
        count: 24,
        imageUrl: img3,
      },
      {
        type: "人类眼部特写",
        count: 42,
        imageUrl: img1,
      },
    ],
  },
  {
    id: "gaokao-2025",
    name: "高考2025",
    date: "2025-06-07",
    isHot: true,
    daysAfter: 15,
    templates: [
      {
        type: "高考视频模板",
        count: 53,
        imageUrl: img2,
      },
      {
        type: "高考H5",
        count: 364,
        imageUrl: img3,
      },
      {
        type: "高考海报",
        count: 515,
        imageUrl: img1,
      },
      {
        type: "高考插画",
        count: 86,
        imageUrl: img2,
      },
      {
        type: "高考元素字体",
        count: 80,
        imageUrl: img3,
      },
    ],
  },
];
export default function MarketingCalendar() {
  const [selectedFestival, setSelectedFestival] = useState<Festival>(
    festivals[0]
  );
  const [lockSelection, setLockSelection] = useState(false);
  const handleHover = (festival: Festival) => {
    if (!lockSelection) {
      setSelectedFestival(festival);
    }
  };
  const handleClick = (festival: Festival) => {
    setSelectedFestival(festival);
    setLockSelection(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.headerRow}>
        <h2 className={styles.sectionTitle}>营销热点</h2>
        <div className={styles.festivalList}>
          {festivals.map((festival) => (
            <div
              key={festival.id}
              className={`${styles.festivalItem} ${selectedFestival.id === festival.id ? styles.active : ""
                }`}
              onMouseEnter={() => handleHover(festival)}
              onMouseLeave={() => setLockSelection(false)}
              onClick={() => handleClick(festival)}
            >
              <div className={styles.festivalLeft}>
                <span className={styles.festivalName}>{festival.name}</span>
                <span className={styles.festivalDate}>{festival.date}</span>
              </div>
              <div className={styles.daysAfter}>
                <span className={styles.daysNumber}>{festival.daysAfter}</span>
                <span className={styles.daysText}>天后</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className={styles.templateGallery}>
        {selectedFestival.templates.map((template) => (
          <div key={template.type} className={styles.templateCard}>
            <div className={styles.templateContent}>
              <div className={styles.templateImageContainer}>
                <img
                  src={template.imageUrl}
                  alt={template.type}
                  className={styles.templateImage}
                />
              </div>
              <div className={styles.templateInfo}>
                <h4>{template.type}</h4>
                <span>共{template.count}个作品</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}